<!-- components/Breadcrumb.vue -->
<template>
    <nav class="breadcrumb fn-clear">
      <ul>
        <!-- <li><img /></li> -->
        <li><span class="breadcrumb-title">当前位置：</span></li>
        <li v-for="(item, index) in items" :key="index">
          <NuxtLink 
            v-if="index < items.length - 1"
            :to="localePath(item.path)"
            class="breadcrumb-item"
          >
            {{ item.title }}
          </NuxtLink>
          <span v-else class="current-item">
            {{ item.title }}
          </span>
          <span v-if="index < items.length - 1" class="separator"> > </span>
        </li>
      </ul>
    </nav>
  </template>
  
  <script setup>
  const localePath = useLocalePath()
  defineProps({
    items: {
      type: Array,
      required: true,
      validator: items => items.every((i, index, arr) => {
        const isLast = index === arr.length - 1
        return 'title' in i && (isLast ? true : 'path' in i)
      })
    }
  })
  </script>
  
  <style lang="scss" scoped>
    @use '@/assets/scss/main' as *;

  .breadcrumb {
    --gov-text-color: #666;
    --text-active-color:#333;
    --separator-color: #999;
    padding: 1.5rem 0;
    font-size: 1rem;
    width: 100%;
    ul {
      display: flex;
      align-items: center;
      list-style: none;
      padding: 0;
      margin: 0;
      float: left;
    }
    .breadcrumb-title{
        color: var(--gov-text-color);
    }
    .breadcrumb-item {
      color: var(--gov-text-color);
      text-decoration: none;
  
      &:hover {
        color: #1867CA;
        text-decoration: underline;
      }
    }
  
    .current-item {
      color: $myprimary-color;
      font-weight: 500;
    }
  
    .separator {
      margin: 0 0.5rem;
      color: var(--separator-color);
    }
    @media screen and (max-width: 768px) {
      padding:1rem 0;
      ul{
        display: inline;
        li{
          display: inline;
        }
      }
    }
  }
  </style>